<template>
  <div class="goodsshow">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品查询</span>
      </div>
      <el-row :gutter="10" class="addsearche">
        <el-col :xs="15" :sm="8" :md="8" :lg="7" :xl="4">
          <el-input
            placeholder="请输入查询的内容"
            v-model="seachercon"
            class="id"
            clearable
          >
          </el-input>
        </el-col>
        <el-col class="operation" :xs="24" :sm="16" :md="16" :lg="10" :xl="4">
          <el-button type="primary" icon="el-icon-search" @click="seacher"
            >搜索</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="deletesome"
            >多行删除</el-button
          >
          <!-- <el-button type="danger" icon="el-icon-delete" @click="addgoods"
            >增加商品</el-button
          > -->
        </el-col>
      </el-row>
    </el-card>

    <div class="goods-table">
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="productinfo"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :default-sort="{ order: 'descending' }"
        header-cell-class-name="tableStyle"
        :cell-style="cellStyle"
      >
        <!-- 下面的el -column为   点击展开显示的内容 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID：">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称：">
                <span>{{ props.row.goodsname }}</span>
              </el-form-item>
              <el-form-item label="所属店铺：">
                <span>{{ props.row.store }}</span>
              </el-form-item>
              <el-form-item label="商品分类：">
                <span>{{ props.row.kind }}</span>
              </el-form-item>
              <el-form-item label="商品描述：">
                <span>{{ props.row.desction }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" sortable prop="id">
          <!-- 如果需要使用排序功能，则不能使用slot-scope -->
          <!-- <template slot-scope="scope">{{ scope.row.id }}</template> -->
        </el-table-column>

        <el-table-column prop="goodsname" label="商品名称"> </el-table-column>
        <el-table-column prop="goodsprice" sortable label="商品价格">
        </el-table-column>

        <el-table-column label="操作">
          <!-- 如果要获取到选中的数据，就使用插槽 slot-scope -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
              type="warning"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="我再看看"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该数据吗?"
              @confirm="confirm1(scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                class="delete"
                icon="el-icon-delete"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 如果要获取到选中的数据，就使用插槽 slot-scope -->
            <vue-qr :text="scope.row.goodsname" :size="100"></vue-qr>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginat">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </div>
    <h1>商品信息</h1>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.goodsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.goodsprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="form.desction" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属店铺" :label-width="formLabelWidth">
          <el-input v-model="form.store" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="edit"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<script>
import vueQr from "vue-qr";
import { getproduct } from "@/network/productinfo";
import { edit, deleteOne, deleteSome, addgood } from "@/network/controllers";
export default {
  name: "shopmessage",
  data() {
    return {
      loading: true,
      input: "",
      seachercon: "",
      title: "商品信息",
      multipleSelection: [], //选中的数据
      productinfo: [], //显示的数据
      counts: 0,
      dialogFormVisible: false, //编辑的对话框是否显示
      form: {
        //编辑的内容
        id: "",
        goodsname: "",
        goodsprice: "",
        desction: "",
        kind: "",
        store: "",
      },
      formLabelWidth: "120px",
      fullscreenLoading: false,
      visible: false,
      currentPage: 1, //哪一页
      currentlimit: 10,
    };
  },
  created() {
    this.getlist();
  },
  mounted() {},
  methods: {
    addgoods() {
      addgood({
        test: "test",
      }).then((result) => {
        console.log(result);
      });
    },
    seacher() {
      this.getlist(this.seachercon, this.currentPage, this.currentlimit);
    },
    handleEdit(index, row) {
      //点击编辑时触发
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.goodsname = row.goodsname;
      this.form.kind = row.kind;
      this.form.goodsprice = row.goodsprice;
      this.form.desction = row.desction;
      this.form.store = row.store;
    },
    confirm1(row) {
      //确定删除时触发
      this.fullscreenLoading = true;
      this.deletenumber(row.id);
    },
    deletesome() {
      let deletelist = [];
      this.multipleSelection.forEach((value, index) => {
        //将选中的数据id添加进数组
        deletelist.push(value.id);
      });
      if (deletelist.length <= 0) {
        this.$message({
          showClose: true,
          message: "请选择数据!",
          type: "warning",
          duration: 1500,
        });
      } else if (deletelist.length == 1) {
        this.deletenumber(deletelist[0]);
      } else {
        deleteSome({ deletelist: deletelist }).then((res) => {
          this.getlist();
          this.$message({
            showClose: true,
            message: res.ErrorMessage,
            duration: 2000,
            type: "success",
          });
        });
      }
      console.log(deletelist);
    },
    deletenumber(id) {
      //删除单一数据
      deleteOne({ id: id }).then((result) => {
        this.getlist();
        this.$message({
          showClose: true,
          message: result.ErrorMessage,
          duration: 2000,
          type: "success",
        });
        this.fullscreenLoading = false;
      });
    },
    handleSelectionChange(val) {
      //选中checkbox触发
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    getlist(seachercon = "", page = 1, limit = 10) {
      getproduct({ page, limit, condition: seachercon }).then((result) => {
        this.productinfo = result;
        this.counts = result[0].counts;
        this.loading = false; //数据请求过来的时候将loading改成false
        this.fullscreenLoading = false;
      });
      console.log("请求了一次列表");
    },
    edit() {
      this.fullscreenLoading = true;
      edit(this.form).then((result) => {
        this.$message({
          showClose: true,
          message: result.ErrorMessage,
          duration: 2000,
          type: "success",
        });
        this.getlist();
      });
      this.dialogFormVisible = false;
    },
    handleSizeChange(val) {
      this.currentlimit = val;
      console.log(`每页 ${val} 条`);
      this.getlist(this.seachercon, this.currentPage, this.currentlimit);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getlist(this.seachercon, this.currentPage, this.currentlimit);
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 4) {
        return "color:red";
      }
    },
  },
  activated() {
    this.$store.commit("addtags", {
      id: 1,
      path: this.$route.path,
      title: this.title,
    });
  },
  components: {
    vueQr,
  },
};
</script>

<style scoped>
.goodsshow {
  width: 100%;
}
.el-table .delete {
  margin: 0px !important;
}

/* 展开的内容样式 */
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-form-item span {
  color: #8bc1e6;
  font-weight: 700;
}
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.paginat {
  display: flex;
  justify-content: center;
}
</style>